<template>
    <div class="containerBox editForm">
        <easyForm :fieldList="fieldList" :model="model" :options="options" @submit="search" @reset="reset">
                
        </easyForm>
    </div>
  
</template>

<script lang="ts" setup>

import { ref , reactive, watch} from 'vue'
import { ElMessageBox, FormInstance } from 'element-plus'
import easyForm from '@/components/formItem/index.vue'
import { onBeforeRouteLeave } from 'vue-router';

const formList = {
    base: [
        { label: '咨询服务名称：', field: 'name',rules: [{required: true, message: '咨询服务名称不能为空'}], maxlength:15,tooltip:"1、初次评估预付定金，咨询完结尾款XXX元 满足线上预付定金，设置服务价格为50，线下咨询完后结尾款的使用场景。 2、个人单次咨询 个人单次咨询。 3、家庭/情侣两人咨询 适用于不同价格与时长次数的多人咨询。 4、个人成长丨长程咨询 设置多次起卖，也可以设置单价优惠，一起卖优惠。 5、南京大学学生咨询通道，以学生证为准 给专门通道设置咨询，设置单独咨询费用。 6、解密烦恼背后真相 用低价给新用户做困惑解密，作为链接用户的通道。" ,popoverTitle:"咨询服务名称示例"},
        { label: '单次咨询时长：', field: 'time', rules: [{required: true, message: '单次咨询时长不能为空'}], append: '分钟', },
        { label: '咨询价格：', field: 'price', rules: [{required: true, message: '咨询价格不能为空'}], append: '元', },
        { label: '咨询次数：', field: 'times', rules: [{required: true, message: '咨询次数不能为空'}], append: '次', },
        { label: '是否限制下单次数：', field: 'limitFlag', rules: [{required: true, message: '是否限制下单次数不能为空'}], type: 'radio', options: { data: [{ label: '是', value: 1 }, { label: '否', value: 0 }] } },
        { label: '是否可退款：', field: 'refundFlag', rules: [{required: true, message: '是否可退款不能为空'}], type: 'radio', options: { data: [{ label: '是', value: 1 }, { label: '否', value: 0 }] } },
        { label: '支持咨询方式：', field: 'consultStyle', rules: [{required: true, message: '支持咨询方式不能为空'}], type: 'checkbox', options: { data: [{ label: '面对面', value: 1 }, { label: '视频', value: 2 }, { label: '语音', value: 3 }] } },
        { label: '咨询服务介绍：', field: 'introduction', rules: [{required: true, message: '咨询服务介绍不能为空'}], type: 'textarea', placeholder: '咨询服务介绍', maxlength:2000, popoverTitle:"咨询服务介绍示例", tooltip:"个人咨询: 一对一心理咨询服务，咨询方面可包括个人的各个方面。 家庭咨询：针对家庭进行的咨询服务，包括夫妻关系、亲子关系以及家庭成员个人的心理咨询等。 夫妻咨询：夫妻间的咨询服务，包括夫妻情感、亲密关系等各个方面。 青少年咨询：指对未成年人的咨询服务。 首次咨询评估：新访客第一次预约咨询师的咨询评估服务。 个人单次咨询：一对一心理咨询服务，此服务为一个时段的咨询服务费用。 个人成长丨长程咨询 ：一对一心理咨询服务，此服务为多个时段咨询服务套餐费用。 情侣两人咨询：一对二心理咨询服务，情侣两人同时与咨询师进行咨询，此服务为一个时段的咨询服务费用。"},
        { label: '关联咨询师：', field: 'relevancy', rules: [{required: true, message: '关联咨询师不能为空'}], type: 'select', multiple: true, options: { data: [{ label: '吃饭', value: 1 }, { label: '睡觉', value: 2 }, { label: '写代码', value: 3 }] } },
    ],
}
const fieldList: Form.FieldItem[] = formList.base;
const options = {
    labelPosition: 'right',
    disabled: false,
    submitButtonText: '提交',
    resetButtonText: '取消',
    showSubmitButton:true,
    // showResetButton:true,
    
};

// 搜索参数配置 使用form组件
const model = ref<Record<string, any>>({
        labelWidth:"160px",
        inlineFlag:false,
        name: '',
        price: '',
        times: '',
        limitFlag: 1,
        refundFlag: 1,
        consultStyle: 1,
        introduction: '',
        relevancy: '',
    })
const editFlag = ref(false);
watch(model.value, (newVal, oldVal) => {
    console.log(model.value)
    editFlag.value = true
})

onBeforeRouteLeave((to, from, next) => {
    if(editFlag.value){
        ElMessageBox.confirm(
        '当前页面修改数据为保存，确定离开吗?',
        '温馨提示',
        {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        }
    )
        .then(() => {
            next()
        })
        .catch(() => {
            return false;
        })
    }else{
        next()
    }
})
</script>

<style scoped lang="scss">
.containerBox{
    // width: calc(100% - 20px);
    box-sizing: border-box;
    margin: 10px;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #efefef;
    box-shadow: 0 0 10px #999!important;

}
</style>